<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>封面打印</title>

    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <!-- 引入element 的组件库-->
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

    <!--引入layui组件-->
    <link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css"  media="all">
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>
    <script type="text/javascript" src="/admin/js-css/js/jQuery.print.js?v=1.1"></script>


    <style type="text/css">
        td{
            height: 60px;
            font-weight: bold;
        }

        .left_jl{
            padding-left: 5px;
        }

        .bottom_border{
            border-bottom: #0C0C0C 1px solid;
            width: 300px;
            height: 43%;
        }
    </style>

</head>
<body>
<div id="app"  >
    <div id="topdiv" ref="appdiv" >
        <div class="demoTable" style="padding: 5px;"   >
            <el-form :inline="true" size="mini"   ref="listSearch"   >

                <el-form-item  >
                    <el-button type="primary" plain @click="printHtml">报表打印</el-button>
                </el-form-item>

            </el-form>
        </div>
    </div>

    <div id="printListRoster"  >
        <div style="break-after: page;text-align: center"  >
            <table border="0" cellpadding="8" style="border-collapse: collapse; width: 100%; font-size: 14px;text-align: center;" >
                <tr>
                    <td colspan="2" style="font-size: 25px;height: 300px;">
                        <div contenteditable="true" >离退休人员生活补贴及过渡年金定期报表</div>
                    </td>
                </tr>

                <tr>
                    <td align="right" width="35%" >编 制 单 位：</td>
                    <td  >
                        <div class="bottom_border" contenteditable="true" >玉门油田分公司共享中心</div>
                    </td>
                </tr>

                <tr>
                    <td align="right" >报 表 期：</td>
                    <td>
                        <div class="bottom_border" contenteditable="true"  >
                            {{year}}年
                        </div>
                    </td>
                </tr>
                <tr>
                    <td  align="right" >负 责 人：</td>
                    <td>
                        <div class="bottom_border" contenteditable="true" >
                        </div>
                    </td>
                </tr>
                <tr>
                    <td  align="right" >审 核 人：</td>
                    <td>
                        <div class="bottom_border" contenteditable="true" >
                        </div>
                    </td>
                </tr>
                <tr>
                    <td  align="right" >制 表 人：</td>
                    <td>
                        <div class="bottom_border" contenteditable="true" >
                        </div>
                    </td>
                </tr>
                <tr>
                    <td align="right" >编 制 日 期：</td>
                    <td  >
                        <div class="bottom_border" contenteditable="true" >
                            {{year}}年{{month}}月
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>


</div>
</body>
<script>

    var vm = new Vue({
        el:"#app",
        data:{
            year:"",
            month:"",
        },
        created(){
            this.init();
        },
        methods:{
            init(){
                let date = renderTime(new Date(),"yyyy-MM-dd");
                let ds = date.split("-");
                this.year = ds[0];
                this.month = ds[1];
            },
            printHtml() {
                $("#printListRoster").print();
            },
        }
    });
</script>
</html>